<template>
  <view class="container">
    <!-- 顶部标题栏 -->
    <view class="header">消息</view>
	<uni-list v-for="(notification, index) in notifications.slice().reverse()" :key="index" :border="true">
	  <uni-list-chat :title="notification.title"
					clickable="true"
	                 @click="showDetail(notification, index)"
	                 avatar="/static/image/info.png"
	                 :note="notification.note"
	                 :time="notification.date"
	                 badge-positon="left"
	                 :badge-text="getBadgeText(notification.isRead)"
					 class="custom-uni-list-chat">
	  </uni-list-chat>
	</uni-list>
	<!-- 弹出层组件 -->
	    <uni-popup ref="popup" type="center">
	      <view class="popup-content">
	        <view class="popup-note">{{ currentNotification.note }}</view>
	        <button @click="confirmDelete">删除信息</button>
	        <button @click="closePopup">关闭</button>
	      </view>
	    </uni-popup>
	</view>
</template>

<script>
import api from '@/api/api.js';
export default {
  data() {
    return {
      // 这是从服务器获取或预先定义的通知数据
      notifications: [],
	  currentNotification: {}, // 当前选中的通知
	  currentIndex: -1 // 当前选中通知的索引
    }
  },
  methods: {
    // 动态删除列表中的项目
    removeNotification(index) {
      this.notifications.splice(index, 1);
    },
	getinfos(){
		api.getMessage().then(res=>{
			console.info(res);
			this.notifications=res.data.data;
			this.initDate();
			console.info(this.notifications);
		})
	},
	initDate() {
	  this.notifications.forEach(notification => {
	    // 使用 JavaScript 的 Date 对象解析 ISO 8601 格式的日期字符串
	    const date = new Date(notification.date);
	    // 格式化日期为 "YYYY-MM-DD HH:mm:ss"
	    notification.date = `${date.getFullYear()}-${(date.getMonth() + 1).toString().padStart(2, '0')}-${date.getDate().toString().padStart(2, '0')} ${date.getHours().toString().padStart(2, '0')}:${date.getMinutes().toString().padStart(2, '0')}:${date.getSeconds().toString().padStart(2, '0')}`;
	  });
	},
	getBadgeText(isRead) {
	      return isRead ? '' : 'dot';
	    },
	showDetail(notification, index) {
		  //const test={title:'test',note:'test',userId:2}
		  //api.sendMessage(test)
	      this.currentNotification = notification;
	      this.currentIndex = index;
		  console.info(this.currentNotification.isRead);
		  if(notification.isRead===false){
			  console.info(this.currentNotification.id);
			  api.haveReadMessage({id:this.currentNotification.id}).then(res=>{
						  this.getinfos();
			  			  console.info(res);
			  });
		  }
	      this.$refs.popup.open();
	    },
	// 确认删除
	confirmDelete() {
	    uni.showModal({
	    title: '确认删除',
	    content: '您确定要删除这条通知吗？',
	    success: (res) => {
	        if (res.confirm) {
	        api.deleteMessage({id:this.currentNotification.id}).then(res=>{
				console.info(res);
				this.getinfos();
			})
	        this.$refs.popup.close();
	        }
	    }
	    });
	},
	// 关闭弹框
	closePopup() {
	    this.$refs.popup.close();
	}	
  },
  created(){
	  this.getinfos()
  }
}
</script>

<style scoped>
.container {
  padding: 20px;
}

.header {
  font-size: 24px;
  margin-bottom: 10px;
}
.notification-table {
  width: 100%;
  border-collapse: collapse; /* 使表格边框合并为一个单一的边框 */
}

.notification-item {
  border-bottom: 1px solid #ccc;
}

.date-header,
.content-header {
  background-color: #f2f2f2;
  text-align: left;
  padding: 8px;
}

.date {
  color: #999;
  padding: 8px;
}

.icon {
  width: 30px;
  height: 30px;
  vertical-align: middle;
  margin-right: 10px;
}

/* 为消息内容添加样式，确保内容可以换行 */
.content {
  word-wrap: break-word; /* 允许长单词或URL地址换行到下一行 */
  white-space: pre-wrap; /* 保留空白符序列，但是正常地进行换行 */
  max-width: 100%; /* 限制最大宽度 */
}


.title {
  font-weight: bold;
  margin-right: 5px;
}

.message {
  /* 根据需要调整样式 */
}
.popup-content {
  background-color: #fff;
  padding: 20px;
  border-radius: 10px;
}

.popup-note {
  word-wrap: break-word; /* 允许长单词或URL地址换行到下一行 */
  white-space: pre-wrap; /* 保留空白符序列，但是正常地进行换行 */
  max-width: 100%; /* 可选，如果需要限制最大宽度 */
  overflow-wrap: break-word; /* 在长单词或URL内部进行换行 */
}

button {
  margin-top: 10px;
}
.custom-uni-list-chat {
  /* 设置一个固定的高度，可以根据你的设计调整 */
  height: 80px; 
}
</style>
